<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title th:text="${topic['title']}+' - 话题详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <link rel="stylesheet" th:href="@{{path}/front/mobile/v3/wmui/0.6.2/css/wm-extend.min.css?v={v}(path=${staticPath},v=${v})}">
</head>
<body>

<header class="bar bar-nav">
    <a class="button button-link button-nav pull-left goBack" href="javascript:window.history.go(-1)">
        <span class="iconfont icon-fanhui"></span>
    </a>

    <span th:if="${(topic['lookPermission']==1) or (login && topic['lookPermission']==2) or (joined && topic['lookPermission']==3)}">
        <a class="button button-link button-nav pull-right" id="topic-jubao-btn" href="javascript:void(0);">
            <span class="iconfont icon-jubao mr5"></span>
        </a>
    </span>

    <h1 class='title title-white'>话题详情</h1>
</header>

<nav class="bar bar-tab wm-bar-tab-bx pl75 pr75">
    <aside class="tab-item inp-txt__wrap" th:if="${clazz['status'] == 2}">
        <textarea disabled class="inp-txt-bx vam" placeholder="班级已停班不可评论"></textarea>
    </aside>
    <aside class="tab-item inp-txt__wrap" th:if="${topic['reply'] == 2}">
        <textarea disabled class="inp-txt-bx vam" placeholder="此话题禁止评论"></textarea>
    </aside>
    <aside class="tab-item inp-txt__wrap" th:if="${!joined && login} and ${topic['reply']}==1 and ${topic['replyPermission']}==2">
        <textarea disabled class="inp-txt-bx vam" placeholder="非本班成员不可评论"></textarea>
    </aside>
    <aside class="tab-item inp-txt__wrap" th:if="${(joined && login) && topic['reply'] == 1 && clazz['status'] != 2} or ${(!joined && login) && topic['reply'] == 1 && clazz['status'] != 2} and ${topic['replyPermission']}==1">
        <textarea class="inp-txt-bx vam" id="commentInp" placeholder="写评论"></textarea>
        <span class="fs7 c-blue vam hide" id="commentBtn">发布</span>
    </aside>
    <a class="tab-item external" href="javascript:void(0)" id="reply-number-second">
        <i class="icon icon-message vam" style="font-size: 0.8rem"></i>
        <span class="fs7 vam" th:text="${topic['replyNum']}"></span>
    </a>
    <a class="tab-item external" id="topic-like-btn" href="javascript:void(0)">
        <i class="icon iconfont icon-love_fill c-orange vam" th:classappend="!${liked}?'hide':''" style="font-size: .8rem"></i>
        <i class="icon iconfont icon-xihuan vam" th:classappend="${liked}?'hide':''" style="font-size: 0.8rem;"></i>
        <span class="fs7 vam" id="likeNum" th:text="${topic['likeNum']}"></span>
    </a>
    <a class="tab-item external" id="wShareBtn" href="javascript:void(0)">
        <i class="icon icon-share vam" style="font-size: .8rem"></i>
        <!-- 暂时隐藏掉分享次数
        <span class="fs7 vam" th:text="${topic['shareNum']}"></span>
        -->
    </a>
</nav>

<div class="page-infinite__wrap teacherInfo-page__wrap" style="bottom: 2.2rem">
    <div class="page-group">
        <div id="page-infinite-scroll-bottom" class="page page-current">
            <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                <div class="card this-topic-info">
                    <section>
                        <span class="lecture-time" id="className"></span>
                    </section>
                    <div class="card-content">
                        <div class="list-block">
                            <ul>
                                <li>
                                    <a th:href="@{/mobile/class/info?classId={classId}(classId=${topic['classesId']})}" class="item-link item-content">
                                        <div class="item-media">
                                            <img class="wm-img list-block-userface" th:attr="data-src=${clazz['imageMap']['mobileUrlMap']['small']}" th:src="@{{path}/front/mobile/v3/img/default/error-pic.jpg(path=${staticPath})}" width="30" height="30">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title" th:text="${clazz['name']}"></div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <article class="">
                    <div class="teacher-info__wrap pr">
                        <div class="content-padded pt5 pb5 pl5 pr5">
                            <h1 class="article-title" th:text="${topic['title']}"></h1>
                            <input type="hidden" id="lookNum" th:value="${topic['lookNum']}"/>
                            <div class="facebook-card mt5 pt5">
                                <div class="clearfix">
                                    <aside class="pull-right c-bbb mt5">
                                        <span class="fs4 vam">
                                            <span th:text="${topic['lookNum']}"></span>
                                            阅读
                                        </span>
                                        <span class="fs6 vam"> · </span>
                                        <span class="fs4 vam" th:text="${#strings.substring(topic['createTime'],0,16)}"></span>
                                    </aside>
                                    <div class="facebook-avatar mr5">
                                        <img class="wm-img list-block-userface" th:attr="data-src=${topic['createUser']['avatar']}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}" width="42" height="42">
                                    </div>
                                    <div class="facebook-name c-333 pt5" th:text="${topic['createUser']['nickname']}==null?${topic['createUser']['ralName']}:${topic['createUser']['nickname']}"></div>
                                </div>
                            </div>
                            <div style="word-break: break-all">
                                <span  id="share_content" th:if="${topic['lookPermission'] == 1}" th:utext="${topic['content']}"></span>
                                <span th:if="${topic['lookPermission'] == 2 && login}" th:utext="${topic['content']}"></span>
                                <span th:if="${topic['lookPermission'] == 3 && joined}" th:utext="${topic['content']}"></span>
                                    <div class="mt5" th:if="${!#strings.isEmpty(topic['topicImages']) && #strings.listSplit(topic['topicImages'], ',').size() > 0}">
                                        <div class="topic-list-picture__wrap">
                                            <section class="topic-list-picture-item" th:each=" topicImage : ${#strings.listSplit(topic['topicImages'], ',')}">
                                                <aside class="topic-list-picture-shadow topic-photo-popup"></aside>
                                                <img class="wm-img topic-l-picture" th:attr="data-src=${topicImage}" th:src="@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}">
                                            </section>
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <section class="wm-line"></section>
                    </div>

                    <div>
                        <div class="ml5 mr5 pt5">
                            <strong class="fs6 c-333" id="reply-number-first">评论列表 <small>
                                (<span th:text="${topic['replyNum']}"></span>)</small>
                            </strong>
                        </div>

                        <div class="wm-course-list__wrap">
                            <div class="list-block no-mt">
                                <ul class="list-container facebook-card wm-topic-list" id="topic-reply-list"></ul>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<div class="popup popup-about allReplyPopup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup"><span class="iconfont icon-guanbi ml5"></span></button>
        <h1 class="title">全部回复</h1>
    </header>
    <nav class="bar bar-tab wm-bar-tab-bx">
        <form id="reply-form-pop" class="hide">
            <input type="hidden" id="save-reply-context-pop" name="context"/>
            <input type="hidden" id="save-reply-targetId-pop" name="targetId"/>
        </form>
        <aside class="tab-item allReplyPop-inp-txt inp-txt__wrap" style="width: 98% !important;">
            <textarea class="inp-txt-bx vam" id="commentInp-pop" placeholder="写评论"></textarea>
            <span class="fs7 c-blue vam hide" id="commentBtn-pop">发布</span>
        </aside>
    </nav>
    <div class="content wm-content allReplyPop-content">
        <div>
            <div class="list-block no-mt">
                <ul class="list-container facebook-card">
                    <li class="card-header">
                        <input type="hidden" id="reply-id"/>
                        <input type="hidden" id="reply-userid"/>
                        <div class="facebook-avatar mr5"><img id="reply-img" class="wm-img list-block-userface" width="42" height="42" alt=""></div>
                        <div class="facebook-name c-blue fs6" id="reply-user"></div>
                        <div class="facebook-date c-bbb fs4" id="reply-date"></div>
                        <div class="wm-comment-list__wrap">
                            <div class="fs7 c-333" id="reply-context"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <hr>
            <div>
                <div class="ml5 mr5">
                    <strong class="fs6 c-333">全部回复</strong>
                </div>
                <div class="content-padded">
                    <div class="list-block no-mt">
                        <ul class="list-container facebook-card" id="allreply-list-content">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="popup popup-about topicJubaoPopup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="cancel-topic-report">
            <span class="iconfont icon-guanbi ml5"></span>
        </button>
        <button class="button button-link button-nav pull-right" id="submit-topic-report">
            <span class="mr5">提交</span>
        </button>
        <h1 class="title">话题举报</h1>
    </header>
    <div class="content wm-content">
        <div class="list-block content-padded">
            <ul id="topic-report-type">
                <li class="item-content dc-active" data-type="2">
                    <div class="item-inner">
                        <div class="item-title">
                            <span class="wm-cm-title">广告或垃圾信息</span>
                        </div>
                        <div class="item-after">
                            <span class="dc-icon-bx ok-icon-bx dc-small-icon-bx">
                                <em class="iconfont icon-duihao"></em>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="item-content" data-type="3">
                    <div class="item-inner">
                        <div class="item-title">
                            <span class="wm-cm-title">抄袭或未授权转载</span>
                        </div>
                        <div class="item-after">
                            <span class="dc-icon-bx ok-icon-bx dc-small-icon-bx">
                                <em class="iconfont icon-duihao"></em>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="item-content" data-type="1">
                    <div class="item-inner">
                        <div class="item-title">
                            <span class="wm-cm-title">其它</span>
                        </div>
                        <div class="item-after">
                            <span class="dc-icon-bx ok-icon-bx dc-small-icon-bx">
                                <em class="iconfont icon-duihao"></em>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
            <ul>
                <li class="pt5">
                    <div class="item-content tqPopTxtarea">
                        <div class="item-input">
                            <textarea id="topic-report-context" placeholder="请输入举报原因"></textarea>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<input hidden id="topicId" th:value="${topic['id']}"/>
<input hidden id="classId" th:value="${topic['classesId']}">

<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src="@{{path}/front/mobile/libs/wmui/0.6.2/js/wm-extend.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/mobile/business/class/topic/topic-info.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>